<%--
  Created by IntelliJ IDEA.
  User: 17420
  Date: 2021/7/28
  Time: 14:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
  <meta charset="utf-8">
  <title>首页</title>
  <style>
    *{
      padding:0;
      margin: 0;
    }

    li{
      list-style: none;
    }

    .background{
      background-image: url("img/背景图片灰.png");
      background-repeat: repeat;

    }

    .top{
      height:40px;
      background-color:#313438;
    }

    .log_regis{
      color:#BEBEBE;;
      position:absolute;
      line-height: 40px;
      left:1150px;
    }

    .log_regis img:hover{
      border-top:5px solid #313438;
    }

    .welcome{
      color:white;
      line-height: 40px;
      position: absolute;
      left: 1200px;
    }


    .exit{
      color:#BEBEBE;
      position:absolute;
      line-height: 40px;
      right:40px;
    }

    .exit img:hover{
      border-top:5px solid #313438;
    }

    .header{
      height:120px;
      padding-left: 150px;
      background-color:white;
    }

    .header input{
      height:35px;
      width:300px;
      position:absolute;
      top:120px;
      left:700px;
      border:2px solid  #000000;
      border-top-left-radius: 30px;
      border-bottom-left-radius: 30px;
      outline:none;
      padding-left: 20px;
    }

    .header button{
      height:39px;
      width:100px;
      position:absolute;
      top:120px;
      left:1001px;
      border: 5px solid #000000;
      background-color:#000000;
      border-top-right-radius: 30px;
      border-bottom-right-radius: 30px;
      padding-top: 3px;
    }

    .header button:hover{
      cursor: pointer;
      background-color:#5f5f5f;
      border:#5f5f5f ;
    }



    /*导航栏*/
    .nav{
      width:100%;
      height:50px;
      background-color: #313438;
      position:relative;
      z-index:1000;
    }

    .nav_content{
      width:1000px;
      height:50px;
      margin:0 auto;
    }

    .nav_content ul li{
      float:left;
    }

    .nav_content ul li a,.nav_content ul li a:visited{
      display:block;
      width:100px;
      height:50px;
      text-align: center;
      line-height: 50px;
      text-decoration: none;
      color:#fff;
      font-size:20px;
    }

    .nav_content ul li a:hover{
      background-color:#5f5f5f;
    }
    /*轮播图*/
    #container a{
      text-decoration: none;
    }

    #container{
      width:100%;
      height:430px;
      overflow:hidden;
      position:absolute;
      box-sizing: border-box;
      position:relative;
    }

    #list{
      height:430px;
      position:absolute;
      z-index: 1;
    }

    #list img{
      float:left;
    }

    #buttons{
      position:absolute;
      height:13px;
      width:200px;
      z-index:2;
      bottom:55px;
      left:660px;
    }

    #buttons span{
      cursor:pointer;
      float:left;
      border:1px solid #fff;
      width:10px;
      height:10px;
      border-radius: 50%;
      background:#fff;
      margin-right:15px;
    }

    #container:hover #buttons span{
      width:12px;
      height: 12px;
    }

    #buttons .on{
      background:rgb(51, 168, 197);
    }

    .arrow{
      cursor: pointer;
      line-height: 39px;
      text-align: center;
      font-size: 30px;
      font-weight: bold;
      width: 50px;
      height: 50px;
      position: absolute;
      z-index: 2;
      top: 250px;
      color: #fff;
    }

    .arrow:hover{
      background-color: RGBA(0,0,0,.2);
    }

    #container:hover .arrow{
      font-size:60px;
    }

    #prev{
      left:5px;
    }

    #next{
      right:5px;
    }



    .content{
      width:1200px;
      margin:0 auto;
      height:auto;

    }

    .line1{
      height:130px;
      position:absolute;
      top:680px;
    }

    .popular_movies{
      /*border:2px solid black;*/
      height: auto;
      width:900px;
      float:left;
      padding:30px;
      box-sizing: border-box;

    }

    .popular_movie{
      width:270px;
      height:360px;
      text-align: center;
      float:left;
    }

    .popular_movie a img:hover{
      box-shadow: 10px 10px 10px gray;
      transform: translate(0,-15px);
      transition-delay: 0s !important;
    }

    .score_list{
      /*border:2px solid black;*/
      height:500px;
      width:290px;
      float:left;
      padding:30px;
      box-sizing: border-box;

    }

    .score_list ul{
      background-color: #313438;
      padding:20px;
      border-radius:15px;
    }

    .score_list ul li{
      height:41px;
      line-height: 41px;
      color:#fff;
    }

    .score_list ul li:hover{
      cursor: pointer;
      color:rgb(51, 168, 197);
      font-size: 20px;
    }

    .score_list ul li span{
      color:rgb(51, 168, 197);
    }

    .classify{
      clear: both;
      padding:30px;
      box-sizing: border-box;
    }

    .list-item{
      float:left;
      width:75px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      cursor:pointer;
      color:#777777;
    }

    .list-item-checked{
      border-bottom: 3px solid rgb(51, 168, 197);
      color:rgb(51, 168, 197);
    }

    #content-box{
      position: relative;
      clear: both;
      width:1130px;
      height:700px;
    }

    .contents{
      width:1130px;
      height:700px;
      z-index: 0;
      opacity: 0;
      visibility: hidden;
      -webkit-transition: all .5s;
      -moz-transition: all .5s;
      -ms-transition: all .5s;
      -o-transition: all .5s;
      transition: all .5s;
      position: absolute;
      left: 0;
      top: 0;
    }

    .contents-checked{
      z-index: 1;
      opacity: 1;
      visibility: visible;
    }

    .px{
      width:280px;
      height:360px;
      float:left;
      text-align:center;
      position:relative;
    }

    .px p{
      position:absolute;
      bottom:30px;
      left:30px;
      font-size: 20px;
      color:#777777;
    }

    .px span{
      position:absolute;
      bottom:330px;
      left:210px;
      font-size: 20px;
      color:orange;
    }

    .px a img:hover{
      box-shadow: 10px 10px 10px gray;
      transform: translate(0,-20px);
      transition-delay: 0s !important;
    }



    .foot{
      height:320px;
      background-color:#313438;
      padding:80px;
      color:#fff;
      font-size:15px;
      box-sizing: border-box;
      text-align: center;
    }

    .foot ul li{
      width:auto;
      padding-right:15px;
      padding-left:15px;
      height:15px;
      line-height:15px;
      float:left;
      border-right: 1px solid #fff;
      text-align: center;
    }

    .foot ul li a:hover{
      text-decoration: underline;
    }

    .foot_content1{
      margin:0 auto;
      width:410px;
    }

    .foot_content2{
      margin:0 auto;
      width:200px;
    }

    a{
      text-decoration: none;
      color:inherit;
    }


  </style>
  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>   <!--引入jquery库-->
  <script>
    $(document).ready(function(){
      var width=$('#container').width();
      $('.list_img').css("width",width+'px');   //在图片加载前确定图片大小
    })

    window.onload=function(){
      var width=$('#container').width();
      $('#list').css("left",-width+'px');
      $('#list').css("width",7*width);


      //焦点图轮播：
      var container = document.getElementById('container');
      var list = document.getElementById('list');
      var buttons = document.getElementById('buttons').getElementsByTagName('span');
      var prev = document.getElementById('prev');
      var next = document.getElementById('next');
      var index = 1;    //用于索引当前按钮
      var len = 5;      //图片的数量
      var animated = false;   //用于判断切换是否进行
      var interval = 5000;    //自动播放定时器秒数，这里是5秒
      var timer;             //定时器

      function animate (offset) {
        animated = true;     //切换进行中
        var time = 500;     //位移总时间
        var inteval =10;   //位移间隔时间
        var speed = offset/(time/inteval);   //每次位移量
        var left = parseInt(list.style.left) + offset; //目标值

        var go = function (){
          //这两种情况表示还在切换中
          if ( (speed > 0 && parseInt(list.style.left) < left) || (speed < 0 && parseInt(list.style.left) > left)) {
            list.style.left = parseInt(list.style.left) + speed + 'px';
            setTimeout(go, inteval); //继续执行切换go()函数
          }
          else {
            list.style.left = left + 'px';
            if(left>-width){
              list.style.left = -width * len + 'px';
            }
            if(left<(-width*len)) {
              list.style.left = -width+'px';
            }
            animated = false; //切换完成
          }
        }
        go();
      }
      //用于为按钮添加样式
      function showButton() {
        //先找出原来有.on类的按钮，并移除其类
        for (var i = 0; i < buttons.length ; i++) {
          if( buttons[i].className == 'on'){
            buttons[i].className = '';
            break;
          }
        }
        //为当前按钮添加类
        buttons[index - 1].className = 'on';
      }
      //自动播放
      function play() {
        timer = setTimeout(function () {
          next.onclick();
          play();
        }, interval);
      }
      //清除定时器
      function stop() {
        clearTimeout(timer);
      }
      //右点击
      next.onclick = function () {
        if (animated) {    //如果切换还在进行，则直接结束，直到切换完成
          return;
        }
        if (index == 5) {
          index = 1;
        }
        else {
          index += 1;
        }
        animate(-width);
        showButton();
      }
      //左点击
      prev.onclick = function () {
        if (animated) {       //如果切换还在进行，则直接结束，直到切换完成
          return;
        }
        if (index == 1) {
          index = 5;
        }
        else {
          index -= 1;
        }
        animate(width);
        showButton();
      }

      for (var i = 0; i < buttons.length; i++) {
        buttons[i].onclick = function () {
          if (animated) {         //如果切换还在进行，则直接结束，直到切换完成
            return;
          }
          if(this.className == 'on') {     //如果点击的按钮是当前的按钮，不切换，结束
            return;
          }
          //获取按钮的自定义属性index，用于得到索引值
          var myIndex = parseInt(this.getAttribute('index'));
          var offset = -width * (myIndex - index);   //计算总的位移量

          animate(offset);
          index = myIndex;   //将新的索引值赋值index
          showButton();
        }
      }

      container.onmouseover = stop;//父容器的移入移出事件
      container.onmouseout = play;
      play();  //调用自动播放函数


      //标签切换：
      Tabs(".list-item", ".contents", "list-item-checked", "contents-checked");

      function Tabs(tabs_name, contents_name, tabs_checked_style, contents_checked_style) {
        var tabs = document.querySelectorAll(tabs_name),
                contents = document.querySelectorAll(contents_name),
                e_mark = 0;
        for (var i = 0, len = tabs.length; i < len; i++) {
          tabs[i].num = i;
          tabs[i].onclick = function () {
            tabs[e_mark].classList.toggle(tabs_checked_style);
            tabs[this.num].classList.toggle(tabs_checked_style);
            contents[e_mark].classList.toggle(contents_checked_style);
            contents[this.num].classList.toggle(contents_checked_style);
            e_mark = this.num;
          }
        }
      }



    }

  </script>
</head>

<body>
<!--顶部横条-->
<div class="top">
  <div class="log_regis">
    <a href="Info?method=userInfo&userId=${user.getId()}"><img title="个人中心" src="img/头像.jpeg" height="40px;"></a>
  </div>
  <div class="welcome">
    <p>欢迎你，${user.getUsername()}</p>
  </div>
  <div class="exit">
    <a href="Logout"><img  title="退出登录" src="img/出口.jpg" height="40px;"></a>
  </div>
</div>


<!--页眉-->
<div class="header">
  <img src="img/logo4.png" height="120px" width="200px"/>
  <img src="img/场记板2.png" height="60px" width="100px" />
  <form action="Movie" method="post">
    <input type="text" name="name">
    <%--    <input type="button" src="img/放大镜.png" height="25px" value="搜索">--%>
    <button><img src="img/放大镜.png" height="25px"/></button>
  </form>

</div>

<!--导航栏-->
<br>
<div class="nav">
  <div class="nav_content">
    <ul>
      <li><a href="Movie?method=findByArea&movieName=中国">华语</a></li>
      <li><a href="Movie?method=findByArea&movieName=欧美">欧美</a></li>
      <li><a href="Movie?method=findByArea&movieName=韩国">韩国</a></li>
      <li><a href="Movie?method=findByArea&movieName=日本">日本</a></li>
    </ul>
  </div>
</div>


<!--焦点图轮播-->
<div id="container">
  <div id="list" >
    <img src="img/暮光之城.jpeg" height="430px" class="list_img" />       <!--图1-->
    <img src="img/暮光之城.jpeg" height="430px" class="list_img" />       <!--图1-->
    <img src="img/八公.jpeg" height="430px" class="list_img" />    <!--图2-->
    <img src="img/霍比特.jpeg" height="430px" class="list_img" />    <!--图3-->
    <img src="img/复联.jpeg" height="430px" class="list_img" />       <!--图4-->
    <img src="img/少年.jpeg" height="430px" class="list_img" />       <!--图5-->
    <img src="img/少年.jpeg" height="430px" class="list_img" />       <!--图5-->
  </div>
  <div id="buttons">
    <span index="1" class="on"></span>
    <span index="2"></span>
    <span index="3"></span>
    <span index="4"></span>
    <span index="5"></span>
  </div>
  <a href="javascript:;" id="prev" class="arrow">&lt;</a>
  <a href="javascript:;" id="next" class="arrow">&gt;</a>
</div>


<!--主板-->
<img src="img/摄影机.png" class="line1"/>
<div class="background">
  <div class="content">
    <!--喜好定制影片板块-->
    <div class="popular_movies">
      <h2>根据您的喜好 <b>「${user.getHobbies()}」</b>推荐：</h2><br><hr style="background-color:whitesmoke; height:2px;margin:auto;"><br>
      <c:forEach items="${tipList}" var="movie">
      <div class="popular_movie" >
        <a href="Movie?method=findById&id=${movie.id}"><img src="img/${movie.name}.webp" width="230px" height="300px"/></a>
        <p>电影名:${movie.name}</p>
        <p>${movie.type}</p>
      </div>
      </c:forEach>

    </div>
    <!--评分榜板块-->
    <div class="score_list">
      <h2>评分总榜：</h2><br><hr style="background-color:whitesmoke; height:2px;margin:auto;"><br>
      <ul>
        <li><a href="Movie?method=findById&id=1"><span>1</span>&nbsp;&nbsp;肖申克的救赎</a></li>
        <li><a href="Movie?method=findById&id=2"><span>2</span>&nbsp;&nbsp;霸王别姬</a></li>
        <li><a href="Movie?method=findById&id=3"><span>3</span>&nbsp;&nbsp;阿甘正传</a></li>
        <li><a href="Movie?method=findById&id=4"><span>4</span>&nbsp;&nbsp;这个杀手不太冷</a></li>
        <li><a href="Movie?method=findById&id=5"><span>5</span>&nbsp;&nbsp;泰坦尼克号</a></li>
        <li><a href="Movie?method=findById&id=6"><span>6</span>&nbsp;&nbsp;美丽人生</a></li>
        <li><a href="Movie?method=findById&id=7"><span>7</span>&nbsp;&nbsp;千与千寻</a></li>
        <li><a href="Movie?method=findById&id=8"><span>8</span>&nbsp;&nbsp;辛德勒的名单</a></li>
        <li><a href="Movie?method=findById&id=9"><span>9</span>&nbsp;&nbsp;盗梦空间</a></li>
        <li><a href="Movie?method=findById&id=10"><span>10</span>&nbsp;&nbsp;忠犬八公的故事</a></li>
        <li><a href="Movie?method=findById&id=11"><span>11</span>&nbsp;&nbsp;星际穿越</a></li>
        <li><a href="Movie?method=findById&id=12"><span>12</span>&nbsp;&nbsp;楚门的世界</a></li>
        <li><a href="Movie?method=findById&id=13"><span>13</span>&nbsp;&nbsp;海上钢琴师</a></li>
        <li><a href="Movie?method=findById&id=14"><span>14</span>&nbsp;&nbsp;三傻大闹宝莱坞</a></li>
        <li><a href="Movie?method=findById&id=15"><span>15</span>&nbsp;&nbsp;机器人总动员</a></li>
      </ul>
    </div>
    <!--分类板块-->
    <div class="classify">
      <br><hr style="background-color:whitesmoke; height:2px;margin:auto;"><br>
      <h2>分类电影：</h2><br><br>
      <ul>
        <li class="list-item list-item-checked">喜剧</li>
        <li class="list-item">动作</li>
        <li class="list-item">爱情</li>
        <li class="list-item">科幻</li>
        <li class="list-item">惊悚</li>
        <li class="list-item">动画</li>
      </ul><br><br><br><br>
      <div id="content-box">
        <div class="contents contents-checked">
          <div class="px"><a href="Movie?method=findById&id=6"><img src="img/美丽人生.webp" width="230px" height="300px"/></a><p>美丽人生</p><span>9.6</span></div>
          <div class="px"><a href="Movie?method=findById&id=14"><img src="img/三傻大闹宝莱坞.webp" width="230px" height="300px"/></a><p>三傻大闹宝莱坞</p><span>9.2</span></div>
          <div class="px"><a href="Movie?method=findById&id=16"><img src="img/放牛班的春天.webp" width="230px" height="300px"/></a><p>放牛班的春天</p><span>9.3</span></div>
          <div class="px"><a href="Movie?method=findById&id=18"><img src="img/疯狂动物城.webp" width="230px" height="300px"/></a><p>疯狂动物城</p><span>9.2</span></div>
          <div class="px"><a href="Movie?method=findById&id=26"><img src="img/触不可及.webp" width="230px" height="300px"/></a><p>触不可及</p><span>9.3</span></div>
          <div class="px"><a href="Movie?method=findById&id=35"><img src="img/飞屋环游记.webp" width="230px" height="300px"/></a><p>飞屋环游记</p><span>9.0</span></div>
          <div class="px"><a href="Movie?method=findById&id=41"><img src="img/鬼子来了.webp" width="230px" height="300px"/></a><p>鬼子来了</p><span>9.3</span></div>
          <div class="px"><a href="Movie?method=findById&id=42"><img src="img/我不是药神.webp" height="300px"/></a><p>我不是药神</p><span>9.0</span></div>

        </div>
        <div class="contents">
          <div class="px"><a href="Movie?method=findById&id=4"><img src="img/这个杀手不太冷.webp" width="230px" height="300px"/></a><p>这个杀手不太冷</p><span>9.4</span></div>
          <div class="px"><a href="Movie?method=findById&id=28"><img src="img/蝙蝠侠：暗黑骑士.webp" width="230px" height="300px"/></a><p>蝙蝠侠：暗黑骑士</p><span>9.2</span></div>
          <div class="px"><a href="Movie?method=findById&id=31"><img src="img/指环王3：王者无敌.webp" width="230px" height="300px"/></a><p>指环王3：王者无敌</p><span>9.1</span></div>
          <div class="px"><a href="Movie?method=findById&id=47"><img src="img/指环王2：双塔奇兵.webp" width="230px" height="300px"/></a><p>指环王2：双塔奇兵</p><span>9.1</span></div>
          <div class="px"><a href="Movie?method=findById&id=51"><img src="img/指环王1：护戒使者.webp" width="230px" height="300px"/></a><p>指环王1：戒指使者</p><span>9.1</span></div>
          <div class="px"><a href="Movie?method=findById&id=56"><img src="img/让子弹飞.webp" width="230px" height="300px"/></a><p>让子弹飞</p><span>8.9</span></div>
          <div class="px"><a href="Movie?method=findById&id=92"><img src="img/杀人回忆.webp" width="230px" height="300px"/></a><p>杀人回忆</p><span>8.9</span></div>
          <div class="px"><a href="Movie?method=findById&id=93"><img src="img/加勒比海盗.webp" width="230px" height="300px"/></a><p>加勒比海盗</p><span>8.8</span></div>



        </div>
        <div class="contents">
          <div class="px"><a href="Movie?method=findById&id=2"><img src="img/霸王别姬.webp" width="230px" height="300px"/></a><p>霸王别姬</p><span>9.6</span></div>
          <div class="px"><a href="Movie?method=findById&id=3"><img src="img/阿甘正传.webp" width="230px" height="300px"/></a><p>阿甘正传</p><span>9.5</span></div>
          <div class="px"><a href="Movie?method=findById&id=5"><img src="img/泰坦尼克号.webp" width="230px" height="300px"/></a><p>泰坦尼克号</p><span>9.4</span></div>
          <div class="px"><a href="Movie?method=findById&id=24"><img src="img/怦然心动.webp" width="230px" height="300px"/></a><p>怦然心动</p><span>9.1</span></div>
          <div class="px"><a href="Movie?method=findById&id=32"><img src="img/乱世佳人.webp" width="230px" height="300px"/></a><p>乱世佳人</p><span>9.3</span></div>
          <div class="px"><a href="Movie?method=findById&id=45"><img src="img/天堂电影院.webp" width="230px" height="300px"/></a><p>天堂电影院</p><span>9.2</span></div>
          <div class="px"><a href="Movie?method=findById&id=48"><img src="img/罗马假日.webp" width="230px" height="300px"/></a><p>罗马假日</p><span>9.0</span></div>
          <div class="px"><a href="Movie?method=findById&id=67"><img src="img/情书.webp" width="230px" height="300px"/></a><p>情书</p><span>8.9</span></div>



        </div>
        <div class="contents">
          <div class="px"><a href="Movie?method=findById&id=9"><img src="img/盗梦空间.webp" width="230px" height="300px"/></a><p>盗梦空间</p><span>9.3</span></div>
          <div class="px"><a href="Movie?method=findById&id=11"><img src="img/星际穿越.webp" width="230px" height="300px"/></a><p>星际穿越</p><span>9.3</span></div>
          <div class="px"><a href="Movie?method=findById&id=12"><img src="img/楚门的世界.webp" width="230px" height="300px"/></a><p>楚门的世界</p><span>9.3</span></div>
          <div class="px"><a href="Movie?method=findById&id=15"><img src="img/机器人总动员.webp" width="230px" height="300px"/></a><p>机器人总动员</p><span>9.3</span></div>
          <div class="px"><a href="Movie?method=findById&id=33"><img src="img/哈利波特与魔法石.webp" width="230px" height="300px"/></a><p>哈利波特与魔法石</p><span>9.3</span></div>
          <div class="px"><a href="Movie?method=findById&id=59"><img src="img/黑客帝国.webp" width="230px" height="300px"/></a><p>黑客帝国</p><span>9.1</span></div>
          <div class="px"><a href="Movie?method=findById&id=75"><img src="img/阿凡达.webp" width="230px" height="300px"/></a><p>阿凡达</p><span>8.8</span></div>
          <div class="px"><a href="Movie?method=findById&id=120"><img src="img/超能陆战队.webp" width="230px" height="300px"/></a><p>超能陆战队</p><span>8.7</span></div>



        </div>
        <div class="contents">
          <div class="px"><a href="Movie?method=findById&id=17"><img src="img/无间道.webp" width="230px" height="300px"/></a><p>无间道</p><span>9.3</span></div>
          <div class="px"><a href="Movie?method=findById&id=58"><img src="img/搏击俱乐部.webp" width="230px" height="300px"/></a><p>搏击俱乐部</p><span>9.0</span></div>
          <div class="px"><a href="Movie?method=findById&id=64"><img src="img/窃听风暴.webp" width="230px" height="300px"/></a><p>窃听风暴</p><span>9.2</span></div>
          <div class="px"><a href="Movie?method=findById&id=68"><img src="img/看不见的客人.webp" width="230px" height="300px"/></a><p>看不见的客人</p><span>8.8</span></div>
          <div class="px"><a href="Movie?method=findById&id=77"><img src="img/致命魔术.webp" width="230px" height="300px"/></a><p>致命魔术</p><span>8.9</span></div>
          <div class="px"><a href="Movie?method=findById&id=79"><img src="img/沉默的羔羊.webp" width="230px" height="300px"/></a><p>沉默的羔羊</p><span>8.9</span></div>
          <div class="px"><a href="Movie?method=findById&id=80"><img src="img/禁闭岛.webp" width="230px" height="300px"/></a><p>禁闭岛</p><span>8.8</span></div>
          <div class="px"><a href="Movie?method=findById&id=81"><img src="img/蝴蝶效应.webp" width="230px" height="300px"/></a><p>蝴蝶效应</p><span>8.8</span></div>



        </div>
        <div class="contents">
          <div class="px"><a href="Movie?method=findById&id=53"><img src="img/大闹天宫.webp" width="230px" height="300px"/></a><p>大闹天宫</p><span>9.4</span></div>
          <div class="px"><a href="Movie?method=findById&id=23"><img src="img/龙猫.webp" width="230px" height="300px"/></a><p>龙猫</p><span>9.2</span></div>
          <div class="px"><a href="Movie?method=findById&id=44"><img src="img/天空之城.webp" width="230px" height="300px"/></a><p>天空之城</p><span>9.1</span></div>
          <div class="px"><a href="Movie?method=findById&id=40"><img src="img/哈尔的移动城堡.webp" width="230px" height="300px"/></a><p>哈尔的移动城堡</p><span>9.1</span></div>
          <div class="px"><a href="Movie?method=findById&id=55"><img src="img/狮子王.webp" width="230px" height="300px"/></a><p>狮子王</p><span>9.1</span></div>
          <div class="px"><a href="Movie?method=findById&id=98"><img src="img/红辣椒.webp" width="230px" height="300px"/></a><p>红辣椒</p><span>9.0</span></div>
          <div class="px"><a href="Movie?method=findById&id=103"><img src="img/幽灵公主.webp" width="230px" height="300px"/></a><p>幽灵公主</p><span>8.9</span></div>
          <div class="px"><a href="Movie?method=findById&id=122"><img src="img/侧耳倾听.webp" width="230px" height="300px"/></a><p>侧耳倾听</p><span>8.9</span></div>


        </div>
      </div>
    </div><br><br><br>
  </div>
</div>
<!--页脚-->
<div class="foot">
  <p>友情链接</p><br>
  <div class="foot_content1">
    <ul>
      <li style="padding-left:0px;"><a target="_blank" href="https://movie.douban.com/">豆瓣电影</a></li>
      <li><a target="_blank" href="http://kan.sogou.com/">搜狗影视</a></li>
      <li><a target="_blank" href="https://www.51miz.com/">觅知网</a></li>
      <li><a target="_blank" href="https://www.iqiyi.com/">爱奇艺</a></li>
      <li><a target="_blank" href="https://v.qq.com/">腾讯视频</a></li>
    </ul>
  </div>
  <br><br><br>
  <p>制作团队</p><br>
  <div class="foot_content2">
    <ul>
      <li style="padding-left:0px;">刘俊仪</li>
      <li>练汪鑫</li>
      <li>刘源</li>
    </ul>
  </div>
</div>
</body>
</html>
